<template>
    <!-- 订单抬头 -->
    <ul>
        <li>订单编号: {{orderInfo.id}}</li>
        <li>桌号: {{tableNumber}}</li>
        <li>金额:<b>{{totalPriceTag}}</b></li>
    </ul>
    <!-- 子路由 -->
    <RouterView></RouterView>
</template>

<script lang="ts" setup>
import {computed} from 'vue';
//使用全局状态-总价、订单信息
import { usePriceStore } from '../stores/price';
import { useDetailStore } from '../stores/detail';
const totalPrice=usePriceStore();
const orderInfo=useDetailStore();
//生成订单总金额价格标签
const totalPriceTag=computed<string>(()=>{
    return `￥${totalPrice.value.toFixed(2)}`;
});
//从全局状态中读取桌号
const tableNumber:number=orderInfo.content.table;
</script>

<style lang="scss" scoped>
$text-height:5vw;
$margin:calc($text-height / 2.5);
$top-height:calc($text-height * 4);
@import '../styles/textLayout.scss';
/* 订单抬头行样式布局 */
li{
    @extend %text-layout;
    text-align:left;
    font-size:$text-height;
    margin-bottom:$margin;
}
/* 订单抬头列表样式布局 */
ul{
    width:calc($text-height * 16);
    color:gold;
    background-color:darkgreen;
    padding: {
        top:$margin;
        bottom:calc($margin / 4);
        left:calc($text-height * 2);
    }
    border-radius: $margin;
    margin-left:$text-height;
    height:$top-height;
}
</style>
